<template>
  <div class="main_box" style="padding:10px;">
    <div class="add_wrap">
      <div class="tit">
        <h2>药品信息</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
      </div>
       <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules" style="margin: 0;">
        <el-row >
          <el-form-item label="药品编号" prop="drugCode">
            <el-input v-model="dataForm.drugCode"></el-input>
          </el-form-item>
          <el-form-item label="药厂编号" prop="factoryCode">
            <el-input v-model="dataForm.factoryCode"></el-input>
          </el-form-item>
          <el-form-item label="药品名称" prop="drugName">
            <el-input v-model="dataForm.drugName"></el-input>
          </el-form-item>
          <el-form-item label="药品别名" prop="drugNickName">
              <el-input v-model="dataForm.drugNickName"></el-input>
          </el-form-item>
          <el-form-item label="药品单位" prop="drugUnit">
            <el-input v-model="dataForm.drugUnit"></el-input>
          </el-form-item>
          <el-form-item label="药品规格" prop="drugSpecs">
            <el-input v-model="dataForm.drugSpecs"></el-input>
          </el-form-item>
          <el-form-item label="药品价格" prop="drugPrice">
            <el-input v-model="dataForm.drugPrice" type="number"></el-input>
          </el-form-item>
          <el-form-item label="药品库存" prop="drugInventory">
            <el-input v-model="dataForm.drugInventory" type="number"></el-input>
          </el-form-item>
          <el-form-item label="药厂名称" prop="factoryName">
            <el-input v-model="dataForm.factoryName"></el-input>
          </el-form-item>
          <el-form-item label="是否基药" prop="isHeds">
            <template>
              <el-radio v-model="dataForm.isHeds" label="1">是</el-radio>
              <el-radio v-model="dataForm.isHeds" label="0">否</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="是否医保" prop="isInsurance">
            <template>
              <el-radio v-model="dataForm.isInsurance" label="1">是</el-radio>
              <el-radio v-model="dataForm.isInsurance" label="0">否</el-radio>
            </template>
          </el-form-item>

          <el-col :span="24">
          <el-form-item label="附带说明书" prop="instructions">
            <el-input type="textarea" v-model="dataForm.instructions" placeholder="请输入内容"></el-input>
          </el-form-item>
          </el-col>
        </el-row>

        <!-- 表单保存和提交 -->
        <el-row>
          <el-form-item>
            <el-button type="success" plain round @click="sureDrugClick" >保 存</el-button>
            <el-button type="info" plain round @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
        </el-form>
    </div>
  </div>
</template>

<script>
import * as message from '@/constants/message';
import ConsumeApi from "@/api/consume/consume";

export default {
    data () {
        return {
            roleRules: {
                // 表单校验--暂且做一个名字要求
                drugCode: [
                    {
                        required: true,
                        message: '请输入药品编号',
                        trigger: 'blur'
                    }
                ],
                drugName: [
                    {
                        required: true,
                        message: '请输入药品名称',
                        trigger: 'blur'
                    }
                ],
                drugUnit: [
                    {
                        required: true,
                        message: '请输入药品单位',
                        trigger: 'blur'
                    }
                ],
                drugSpecs: [
                    {
                        required: true,
                        message: '请输入药品规格',
                        trigger: 'blur'
                    }
                ],
                drugPrice: [
                    {
                        required: true,
                        message: '请输入药品价格',
                        trigger: 'blur'
                    }
                ],
                isHeds: [
                    {
                        required: true,
                        message: '请选择是否为基药',
                        trigger: 'change'
                    }
                ],
                isInsurance: [
                    {
                        required: true,
                        message: '请选择是否为医保',
                        trigger: 'change'
                    }
                ],

            },
            // imageUrl: '', // 存储图片url
            dataForm: {
                // 表单数据
                drugId: '', // 判断id
                drugCode: '',
                drugName: '',
                drugNickName: '',
                // drugUrl: '',
                drugUnit: '',
                drugSpecs: '',
                drugPrice: '',
                drugInventory: '',
                factoryName: '',
                factoryCode: '',
                isInsurance: '',
                isHeds: '',
                instructions: '', //药品
            }
        }
    },
  mounted () {
    this.init()
  },
  methods: {
    init () {
        this.$Utils.clearData(this.dataForm)
        // this.listInstitution()
        if (this.$route.query.id) {
          this.dataForm.drugId = this.$route.query.id
          this.getData()
        }
    },

    sureDrugClick () {
      // 提交
      let _this = this
      _this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.dataForm.drugId){  //做一个基础的判断，参数改变就编辑，没改变就增加
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
              this.editData();
          })
          }else{
            this.$confirm(
              message.MSG_CONFIRM_SAVE_ADD,
              message.TITLE_PROMPT,
              {}
          ).then(() => {
              this.addData();
            })
          }
        }
      })
    },
     addData () {
      let _this = this //限制作用域
      let dataFormData = {
        drugName: _this.dataForm.drugName,
        drugCode: _this.dataForm.drugCode,
        drugNickName: _this.dataForm.drugNickName,
        drugUrl: _this.dataForm.drugUrl,
        drugUnit: _this.dataForm.drugUnit,
        drugSpecs: _this.dataForm.drugSpecs,
        drugPrice: _this.dataForm.drugPrice,
        drugInventory: _this.dataForm.drugInventory,
        factoryName: _this.dataForm.factoryName,
        factoryCode: _this.dataForm.factoryCode,
        isHeds: _this.dataForm.isHeds,
        isInsurance: _this.dataForm.isInsurance,
        instructions: _this.dataForm.instructions
      }
      ConsumeApi.addDrug(dataFormData)
        .then(data => {
          this.$notify.success({
            title: message.TITLE_SUCCESS,
            message: message.MSG_ACTION_SUCCESS
          })
          this.returnList()
        })
    },
    editData() { // 编辑
      let _this = this
      ConsumeApi.editDrug(this.dataForm)
        .then(data => {
          this.$notify.success({
            title: message.TITLE_SUCCESS,
            message: message.MSG_ACTION_SUCCESS
          })
          _this.returnList();
        })
    },
    getData () {
      // 编辑前，获取数据
      let _this = this
      ConsumeApi.getDrugInfo({
        drugId: this.$route.query.id
      }).then(res => {
        _this.$Utils.bindingBean(_this.dataForm, res.data)
        if (res.data.drugPrice){
          _this.dataForm.drugPrice = parseInt(res.data.drugPrice)
        }
        if (res.data.drugInventory){
          _this.dataForm.drugInventory = parseInt(res.data.drugInventory)
        }
        // 重新赋值
      })
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/consume/drugManagement'});
    }

  }
}
</script>

<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
<style scoped>
  .add_wrap{
    padding-top: 10px;
    padding-left: 23px;
  }
</style>